<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>ajax的提交 POST 请求</h2>
        <!-- post 方式提交数据  隐藏参数   -->
        <div  >
            <div>
                <label for="">用户名</label>
                <input type="text" name="username"  id="username">
            </div>
            <div>
                <label for="">密码</label>
                <input type="text" name="pass" id="pass" >
            </div>
            <div>
                <button id="submitbtn" >提交数据</button>
            </div>
        </div>
    </div>

    <script>
        var userInp = document.getElementById("username")
        var passInp = document.getElementById("pass")

        var submitbtn = document.getElementById("submitbtn")

        submitbtn.onclick = function(){
            var username = userInp.value;
            var pass = passInp.value;

            // ajax 
            // post 方式提交数据  隐藏参数   FormData (类似表单数据) => Content-Type","application/x-www-form-urlencoded 
            // post 方式提交数据 把参数携带在请求主体 
            // http://localhost/php2107/day2/php/post.php

            // post 
            // 1. 把参数数据对列 作为参数 放到 send() 方法中
            // 2. 提前配置请求头(Request Header)
            var xhr = new XMLHttpRequest();
            xhr.open("post",`../php/post.php`,true);
            // 说明发送参数的数据类型
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")   // 和url一样把参数进行合并成字符串 有些特殊的符号进行解码编码
            xhr.send(`username=${username}&pass=${pass}`);   // 字符串传递给后台 后台自己解析成对象 


            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status == 200){
                    var result = JSON.parse(xhr.responseText)
                    console.log(result)
                }
            }
        }
    </script>
</body>
</html>